<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="close" append-to-body>
    <el-descriptions title="反馈要求" :column="1" size="medium" border labelStyle="width:100px;">
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-dot-square"></i>
          警令内容
        </template>
        <el-input v-model.trim="dataStr.warning_order_content" type="textarea" :rows="5" disabled></el-input>

      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-chat-dot-square"></i>
          反馈要求
        </template>
        {{ dataStr.feedback_require }}
      </el-descriptions-item>

      <el-descriptions-item v-if="filesListOrder.length > 0">
        <template slot="label">
          <i class="el-icon-download"></i>
          附件下载
        </template>
        <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false" :on-preview="handlePreview"
                   :multiple="true" disabled :file-list="filesListOrder"></el-upload>
      </el-descriptions-item>

    </el-descriptions>
    
    <h4 class="title-h4">追加反馈</h4>
    <el-collapse v-if="appendInfo.length > 0" >

      <el-collapse-item v-for="item in appendInfo" :key="item.id">
        <template slot="title">
          <i class="el-icon-date"></i>{{item.create_time}}
        </template>
        <div class="feedback-item">
          <span class="feed-title">追加描述：</span>
          <div class="feed-des feed-text">{{item.append_desc}}</div>
        </div>
        <div class="feedback-item" v-if="item.files.length > 0">
          <span class="feed-title">追加附件：</span>
          <div class="feed-des">
            <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false" :on-preview="handlePreview"
          :multiple="true" disabled :file-list="item.files"></el-upload>
          </div>
        </div>

        <div class="del-btn" @click="deleteOneInfo(item)">
          <el-link type="danger" :underline="false"><i class="el-icon-remove-outline" ></i> 删除</el-link>
        </div>
      </el-collapse-item>

    </el-collapse>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="78px" class="demo-ruleForm">
      
      <el-form-item label="追加描述" prop="append_desc">
        <el-input type="textarea" v-model="ruleForm.append_desc"></el-input>
      </el-form-item>
      <el-form-item label="附件上传">

        <el-upload ref="uploadPicture" class="upload-demo" action="" :auto-upload="false"
                   :on-change="onChangePicture" :on-remove="handleRemovePicture" :multiple="true" :file-list="pictureList"
                   :before-remove="beforeRemove">
          <el-button size="small" icon="el-icon-upload2" type="primary">
            文件上传
          </el-button>
          <div slot="tip" class="el-upload__tip">
            附件大小上限：5.0MB
          </div>
        </el-upload>
      </el-form-item>
      
    </el-form>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="loading" :disabled="disabled">{{
        loading? '确定中 ...': '确 定'
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {detalisWOD, download, saveWOD} from '@/api/warningOrderDept'
import {getOneFile} from "@/api/warningOrder";
import {deleteOne, getInfoList, saveOne} from "@/api/appendInfo";
export default {
  name: 'fkview',
  data() {
    return {
      queryForm: {
        id: ''
      },
      appendInfo:[],
      title: '',
      dialogFormVisible: false,
      dataStr: {},
      filesList: [],
      filesSize: 0,
      filesListOrder: [],
      fileList: [],
      pictureList: [],
      loading: false,
      disabled: false,
      ruleForm: {
        append_desc: '',
        order_dept_id: '',
        },
        rules: {
          append_desc: [
            { required: true, message: '请填写追加描述', trigger: 'blur' }
          ]
        }
    }
  },
  created() {

  },
  methods: {
    onChangePicture(file, fileList) {
      this.pictureList = fileList;
    },
    handleRemovePicture(file, fileList) {
      this.pictureList = fileList
    },
    beforeRemove(file, fileList) {
      // this.queryForm.delIds.push(file.id);
      console.log(file)
      console.log(this.pictureList)
      var uid = file.uid;
      var index = -1;
      for (var i = 0 ; i < this.pictureList.length ; i++){
        if (this.pictureList[i].uid === uid){
          index = i;
        }
      }
      if (index !== -1){
        this.pictureList.splice(0,index);
      }
    },
    showDia(row) {
      this.queryForm.id = row;
      this.ruleForm.order_dept_id = row;
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '追加反馈'
      }
      this.dialogFormVisible = true
      this.fetchData();
      this.getInfo();
    },
    close() {
      this.pictureList = [];
      this.ruleForm = {};
      this.dialogFormVisible = false
      this.filesListOrder = [];
    },
    handlePreview(file) {
      console.log(file);
      this.$baseSeeOrDown('请选择操作？', null, async () => {
        download(file.url).then((res) => {
          const url = window.URL.createObjectURL(new Blob([res]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', file.name)
          document.body.appendChild(link)
          link.click()
        })
      },async () => {

        var fileName = file.name
        if (fileName.indexOf(".pdf") === -1 && fileName.indexOf(".jpg") === -1 && fileName.indexOf(".png") === -1 && fileName.indexOf(".jpeg") === -1){
          this.$baseMessage('此类型文件不支持预览', 'error')
        }else {
          let fileId = file.url;
          var x = {}
          x.id = fileId;
          getOneFile(x).then((res) => {
            window.open(res.data.file_path)
          })
        }
      })
    },
    async fetchData() {
      this.filesList = [];
      this.filesSize = 0;
      this.listLoading = true
      const { data } = await detalisWOD(this.queryForm)
      this.dataStr = data;
      //属性信息 附件
      if (this.dataStr.files) {
        this.dataStr.files.forEach((x) => {
          this.filesList.push({ name: x.file_name, url: x.id })
          this.filesSize++;
        })
      }
      //属性信息 附件
      if (data.order_files) {
        data.order_files.forEach((x) => {
          this.filesListOrder.push({ name: x.file_name, url: x.id })
        })
      }
    },
    // 上传文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    getInfo(){
      var x = {}
      x.order_dept_id = this.queryForm.id
      getInfoList(x).then((res) => {
        this.appendInfo = res.data;
      })

    },
    deleteOneInfo(row){
      this.$baseConfirm('确认要删除吗？', null, async () => {
        deleteOne(row).then((res) => {
          if (res.code === 0){
            this.$baseMessage("删除成功", 'success')
            this.getInfo();
          }else {
            this.$baseMessage(res.msg, 'error')
          }
        })
      })
    },
    save(){
      if (this.loading) {
        return
      }
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.disabled = true
          const params = new FormData()
          for (let i = 0; i < this.pictureList.length; i++) {
            const f = this.pictureList[i]
            params.append('file', f.raw)
          }
          params.append('body', JSON.stringify(this.ruleForm))
          saveOne(params).then((res) => {
            if (res.code === 0) {
              this.pictureList = [];
              this.ruleForm = {};
              this.$baseMessage('追加成功', 'success')
              this.close()
              this.loading = false
              this.disabled = false
            } else {
              this.$baseMessage(res.msg, 'error')
              this.loading = false
              this.disabled = false
            }
          })
        } else {
          return false
        }
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.margintop {
  margin-top: 15px;
}

::v-deep {
  .el-tag{
    margin-left: 0 !important;
    margin-right: 6px !important;
    margin-bottom: 6px;
  }
  .feed-des .el-upload{display:none;}
  .el-descriptions__header {
    margin-bottom: 10px;

    .el-descriptions__title {
      font-size: 14px;
    }
  }
}
.title-h4{
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #303133;
}
::v-deep .el-collapse {
  border: 1px solid #ebeef5;
  padding: 0 14px;
  margin-bottom: 16px;
}
::v-deep .el-collapse-item__header {
  height: 42px;
  line-height: 42px;
  color: #777;
}
.el-icon-date{
  margin-right: 5px;
}
.feedback-item{
  display: flex;
  .feed-title{
    width: 66px;
    text-align: right;
    margin-right: 2px;
    color: #909399;
    line-height: 34px;
  }
  .feed-des{
    flex: 1;
    color: #606266;
    line-height: 34px;
    &.feed-text{
      padding-top: 5px;
      line-height: 24px;
    }
  }
}
.del-btn{
    display: flex;
    justify-content: center;
    background-color: #fafafa;
    padding: 4px 0;
    margin-top: 10px;
  }

</style>

